<template>
  <view class="main-view">
    <public-header :title="title" :isBack="isBack"></public-header>

    <view class="main-view-box" v-if="type==='vip'">
      <u-tabs :activeStyle="{
            color: '#38C09E',
            fontWeight: 'bold',
            transform: 'scale(1.05)'
        }" lineColor="#38C09E" activeColor="#38C09E" :list="tabs" :current="currentTab" @change="changeTab"
        class="u-tabs"></u-tabs>

      <report-table class="report-overview has-header" :serviceName="item.serviceName" v-for="(item,index) in tabs"
        v-show="currentTab===index" :is-show="currentTab===index" v-if="isLoad[item.serviceName]">
      </report-table>
    </view>
    <view class="" v-else-if="serviceName">
      <report-table class="report-overview " :initCond="initCond" :serviceName="serviceName"
        @change-service="changeService"></report-table>
    </view>
  </view>
</template>

<script>
  import lockscreen from '@/common/mixins/lockscreen.js'
  export default {
    mixins: [lockscreen],
    data() {
      return {
        initCond: null,
        isLoad: {},
        title: "",
        isBack: false,
        type: "",
        serviceName: "",
        currentTab: 0,
        oldTab: 0,
        tabs: [{
            name: "会员概览",
            serviceName: "srvretail_member_report_date_select"
          },
          {
            name: "会员卡报表",
            serviceName: 'srvretail_member_report_card_select'
          },
          {
            name: "储值记录",
            serviceName: "srvretail_member_report_recharge_select"
          },
          {
            name: "充值记录",
            serviceName: "srvretail_member_report_recharge_record_select"
          },
          {
            name: "余额消费记录",
            serviceName: "srvretail_member_report_recordsconsumption_select"
          },
          {
            name: "操作记录",
            serviceName: "srvretail_member_report_operationrecord_select"
          },
          {
            name: "积分记录",
            serviceName: "srvretail_member_report_points_select"
          }
        ]
      }
    },
    methods: {
      changeService(e) {
        this.serviceName = e
      },
      changeTab(e) {
        this.currentTab = e.index
        if (this.tabs[e.index]['serviceName']) {
          this.isLoad[this.tabs[e.index]['serviceName']] = true
          this.oldTab = this.currentTab
        } else {
          uni.showToast({
            title: '开发中...',
            icon: 'none'
          })
          this.$nextTick(() => {
            this.currentTab = this.oldTab
          })
        }
      }
    },
    onLoad(option) {
      if (option.cond) {
        try {
          this.initCond = JSON.parse(option.cond)
        } catch (e) {
          //TODO handle the exception
        }
      }
      if (option.title) {
        this.title = option.title
      }
      if (option.isBack) {
        this.isBack = true
      }
      if (option.type) {
        this.type = option.type
      }
      if (option.serviceName) {
        this.serviceName = option.serviceName
        this.isLoad[option.serviceName] = true
        if (this.tabs.findIndex(item => item.serviceName === this.serviceName) > -1) {
          this.currentTab = this.tabs.findIndex(item => item.serviceName === this.serviceName)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
   @import './report-public.scss';
</style>
